<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>第3讲  Vue.js 计算属性  </title>
		<script type="text/javascript" src="../public/vue.js"></script>
		<style>
			body{
				padding: 20px 50px;
			}

			.titleColor {
				color: red;
				font-size: 24px;
				font-weight: bolder;
				margin-bottom: 30px;
			}
		</style>		
	</head>
	<body>

		<!--&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&第1个&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&-->
		<div id="app">
			<span class="titleColor">
				第1个（ Vue.js 计算属性 ~~~~~~~注: Vue 中 computed 是实时计算的意思）:
			</span> <br/>		

			<div>
				{{ message.split('').reverse().join('') }}
			</div>			
		</div><br/>

		<script type="text/javascript">
			/*var vm = new Vue({
				el: '#app',
				data: {
					message: 'Hello world'
				}
			});*/

			var app1 = new Vue({
				el: '#app',
				data: {
					message: 'Hello World 的转反是这'
				}
			});
		</script>


		<!--&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&第2个&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&-->
		<div id="app1">
			<span class="titleColor">
				第2个（ 注: 计算属性 和 Methods（方法））:
			</span> <br/>		
			<div >
				<p>原始的消息 : "{{ message }}"</p>
				<p>反转的消息: "{{ reversedMessage() }}"</p>
			</div>			
		</div>
		<pre>
				var vm = new Vue({
					el: '#app1',
					data: {
						message: 'Hello'
					},
					methods: {
						//反转文本
						reversedMessage: function () {
							return this.message.split('').reverse().join('');
						} 
					}
				});		
			</pre>	
		<script type="text/javascript">
			var vm = new Vue({
				el: '#app1',
				data: {
					message: 'Hello'
				},
				methods: {
					//反转文本
					reversedMessage: function () {
						return this.message.split('').reverse().join('');
					} 
				}
			});
		</script>


		<!--&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&第3个&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&-->
		<div id="app3">
			<span class="titleColor">
				第3个（ 注: 计算属性 vs Watched 属性）:
			</span> <br/>		
			<div >
				{{ fullName }}
			</div>			
		</div>
		<pre>					
					var vm = new Vue({
					  el: '#demo',
					  data: {
						firstName: 'Foo',
						lastName: 'Bar',
						fullName: 'Foo Bar'
					  },
					  watch: {
						firstName: function (val) {
						  this.fullName = val + ' ' + this.lastName
						},
						lastName: function (val) {
						  this.fullName = this.firstName + ' ' + val
						}
					  }
					});

					vm.$data.firstName = 'hi..';
					vm.$data.lastName = '修改了..hi..';	

***************** *****************上面代码是命令式的和重复的。将它与计算属性的版本进行比较：*****************	*****************		
***************** *****************上面代码是命令式的和重复的。将它与计算属性的版本进行比较：*****************	*****************	
***************** *****************上面代码是命令式的和重复的。将它与计算属性的版本进行比较：*****************	*****************	
***************** *****************上面代码是命令式的和重复的。将它与计算属性的版本进行比较：*****************	*****************	

					var vm = new Vue({
						el: '#app3',
						data: {
							firstName: 'Foo',
							lastName: 'Bar'
						},

						computed: {
							fullName: function () {
								return this.firstName + ' ' + this.lastName
							}
						}
					})
					vm.$data.firstName = 'hi..';	// 好得多了，不是吗？
		</pre>	
		<script type="text/javascript">
			var vm = new Vue({
				el: '#app3',
				data: {
					firstName: 'Foo',
					lastName: 'Bar',
					fullName: 'Foo Bar'
				},
				watch: {
					firstName: function (val) {
						this.fullName = val + ' ' + this.lastName
					},
					lastName: function (val) {
						this.fullName = this.firstName + ' ' + val
					}
				}			

			});
			vm.$data.firstName = 'hi..';
		</script>


	</body>
</html>